<template>
  <div class="skin-seting-body">
    <div class="skin-seting-item">
      <span>字体颜色</span>
      <span><ElColorPicker v-model="themeConfig.fontColor" show-alpha /></span>
    </div>
    <div class="skin-seting-item">
      <span>字体被选中时的颜色</span>
      <span><ElColorPicker v-model="themeConfig.fontCheckColor" show-alpha /></span>
    </div>
    <div class="skin-seting-item">
      <span>玻璃板颜色</span>
      <span><ElColorPicker v-model="themeConfig.blurColor" show-alpha /></span>
    </div>
    <div class="skin-seting-item">
      <a-upload
        v-model:file-list="fileList"
        name="avatar"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        :before-upload="beforeUpload"
      >
        <img style="width:150px" v-if="themeConfig.backImg" :src="themeConfig.backImg" alt="avatar" />
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <template  v-else>
            <plus-outlined /> <br/>
            上传背景图
          </template>
        </div>
      </a-upload>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElColorPicker } from 'element-plus'
import { PlusOutlined } from '@ant-design/icons-vue'
import { ref, reactive } from 'vue'
import { ThemeBase } from '@/typeing/dexie'

const fileList = ref([]) // 上传文件列表
const loading = ref(false) // 上传进度状态

const themeConfig = reactive({
  fontColor: '', // 字体颜色
  fontCheckColor: '', // 字体选中颜色
  blurColor: '', // 玻璃板颜色
  backImg: '' as string, // 背景图
} as ThemeBase)

// 上传背景图（上传成功之前）
function beforeUpload(file:any){
  loading.value = true
  const red = new FileReader()
  red.readAsDataURL(file)
  red.onload = (e) => {
    if(e !== null && e.target !== null){
      const base64 = e.target.result
      themeConfig.backImg = base64 as string
      loading.value = false
    }
  }
  return false
}

defineExpose({
  getValue: () => {
    return { ...themeConfig }
  },
  setValue: (params: ThemeBase) => {
    Object.keys(params).forEach((item: string) => {
      themeConfig[item] = params[item]
    })
  }
})
</script>
<style lang="less" scoped>
.skin-seting-body{
  .skin-seting-item{
    display: flex;
    align-items: center;
    &>span:nth-child(1){
      margin:15px 50px 15px 0px;
    }
  }
}
</style>